<template>
  <div class="text-white h-[60px] flex px-5 justify-between items-center">
    <div class="flex items-center text-xl">
      <img
        src="https://www.byteverse.vip/logo.png"
        alt="logo"
        class="w-[46px] h-[46px] mr-2"
      />
      <span>巴特星球</span>
    </div>
    <div class="flex gap-2">
      <SvgIcon @click="openPrivacyPolicy" class="text-3xl cursor-pointer" icon="prime:file" />
      <SvgIcon @click="showModal = true" class="text-3xl cursor-pointer" icon="prime:bell" />
      <SvgIcon @click="logout" class="text-3xl cursor-pointer" icon="prime:sign-out" />
    </div>
  </div>
  <NModal
    title="通知公告"
    v-model:show="showModal"
    preset="card"
    style="width: 700px; height: 700px"
  >
    <div class="markdown-box" v-html="text"></div>
  </NModal>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { SvgIcon } from "@/components/common";
import { NModal } from "naive-ui";
import MarkdownIt from 'markdown-it'
import {fetchNotice} from '@/api/index'
import {removeCookie} from '@/utils/cookie'
import {useRouter} from 'vue-router'

const router = useRouter()

const md = MarkdownIt();
const showModal = ref(false);
const text = ref('');

// computed(()=>{
//   return md.render(`
//   # 体验公告
//   ### 欢迎体验AI，搭建同款站点请扫码咨询👊
//   ## 更新公告🧀 
//   1. V2.12.0更新：增加独立的积分消耗日志明细模块、优化可灵视频模型等 2024-12-05
//   2. 12:26:41 增加独立的积分消耗日志明细模块 增加日志消耗模块的顶部公告支持
//   3. 优化可灵视频模型的KEY配置判断 优化上个版本缺省的音乐积分不显示 更新公告
//   4. V2.11.1/2更新：修复Flux绘画自定义BaseURL未生效、优化提示等 2024-11-06 10:08:47
//   5. 修复flux自定义baseurl未生效问题 修复flux绘画的计费始终为1的问题 优化绘画配置提示
//   `)
// })
onMounted(async ()=>{
  const res = await fetchNotice();
  text.value = md.render(res.data);
})

function logout() {
  removeCookie('session');
  router.push('/login')
}
const openPrivacyPolicy = ()=>{
  window.open('/#/privacyPolicy', '_blank')
}
</script>
<style>
  .markdown-box *{
    all: revert;
  }
</style>
